<!DOCTYPE html>
<html>
<head>
    <title>Optics Diagram Fig. 1.39</title>
</head>
<body>
    <canvas id="opticsCanvas" width="700" height="450"></canvas>
    <script>
        const canvas = document.getElementById('opticsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to match the original sketch
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = 'bold 22px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Set up coordinate system with origin at the lens center
        const cx = 150;
        const cy = 220;
        ctx.translate(cx, cy);

        const scale = 60; // pixels per unit 'l'

        // 1. Draw Principal Axis with ticks and labels
        const axisStart = -2.2 * scale;
        const axisEnd = 5.0 * scale;
        
        ctx.beginPath();
        ctx.moveTo(axisStart, 0);
        ctx.lineTo(axisEnd, 0);
        ctx.stroke();

        // Arrowhead for the axis
        ctx.beginPath();
        ctx.moveTo(axisEnd, 0);
        ctx.lineTo(axisEnd - 12, -6);
        ctx.moveTo(axisEnd, 0);
        ctx.lineTo(axisEnd - 12, 6);
        ctx.stroke();

        // Ticks and labels on the axis
        ctx.fillText('0', 0, 28);
        for (let i = 1; i <= 4; i++) {
            ctx.beginPath();
            ctx.moveTo(i * scale, -6);
            ctx.lineTo(i * scale, 6);
            ctx.stroke();
            ctx.fillText(i.toString(), i * scale, 28);
        }
        ctx.fillText('d/l', 4.5 * scale, 28);

        // 2. Draw the Converging Lens
        const lensHeight = 70;
        const lensWidth = 20;
        
        ctx.beginPath();
        ctx.moveTo(0, -lensHeight);
        ctx.quadraticCurveTo(lensWidth, 0, 0, lensHeight);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(0, -lensHeight);
        ctx.quadraticCurveTo(-lensWidth, 0, 0, lensHeight);
        ctx.stroke();
        
        // Lens labels
        ctx.fillText('O', -15, -5); 
        ctx.fillText('L₁', 0, lensHeight + 20);

        // 3. Draw the Image Arrow
        const imageX = 4 * scale;
        const imageHeight = 60; // Represents 'h'
        
        // Arrow stem
        ctx.beginPath();
        ctx.moveTo(imageX, 0);
        ctx.lineTo(imageX, -imageHeight);
        ctx.stroke();

        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(imageX, -imageHeight);
        ctx.lineTo(imageX - 6, -imageHeight + 12);
        ctx.moveTo(imageX, -imageHeight);
        ctx.lineTo(imageX + 6, -imageHeight + 12);
        ctx.stroke();

        // Label 'h'
        ctx.fillText('h', imageX + 20, -imageHeight / 2);

        // 4. Draw the Rays
        const imageTip = { x: imageX, y: -imageHeight };
        const lensBottom = { x: 0, y: lensHeight };
        
        // Ray 1: Through the center 'O'
        const ray1StartX = -1.5 * scale;
        const ray1StartY = (imageTip.y / imageTip.x) * ray1StartX;
        ctx.beginPath();
        ctx.moveTo(ray1StartX, ray1StartY);
        ctx.lineTo(imageTip.x, imageTip.y);
        ctx.stroke();
        
        // Ray 2: From L1 to image tip
        ctx.beginPath();
        ctx.moveTo(lensBottom.x, lensBottom.y);
        ctx.lineTo(imageTip.x, imageTip.y);
        ctx.stroke();

        // Ray 3: From L1 to axis crossing near '2'
        const crossX = 1.9 * scale;
        ctx.beginPath();
        ctx.moveTo(lensBottom.x, lensBottom.y);
        ctx.lineTo(crossX, 0);
        ctx.stroke();
        
        // Ray 4: Horizontal line segment to the left of L1
        const horizStartX = -1 * scale;
        ctx.beginPath();
        ctx.moveTo(horizStartX, lensBottom.y);
        ctx.lineTo(lensBottom.x, lensBottom.y);
        ctx.stroke();
        
        // 5. Add the Figure Caption
        ctx.fillText('Fig. 1.39', 1.5 * scale, 150);

    </script>
</body>
</html>